<template>
	<div class="web">
		<div class="nav">
			<ol>
				<li class="active">推荐</li>
				<li>MAD·AMV</li>
				<li>MMD·3D</li>
				<li>短片·手书·配音</li>
				<li>综合</li>
			</ol>
		</div>
		<!--推荐选项页面-->
		<div class="content dd">
			<!---热门推荐-->
			<div class="hot">
				<div class="header">
					<p>热门推荐</p>
					<div class="fl">
						<router-link to="../phb">
							<svg class="index__icon__src-partition-recommend- index__fill__src-partition-recommend-  pp" aria-hidden="true">
								<use xlink:href="#icon-paihangbang1"></use>
							</svg>
							<span>排行榜</span>
							<svg class="index__icon__src-partition-recommend- jt" aria-hidden="true">
								<use xlink:href="#icon-gengduo"></use>
							</svg>
						</router-link>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in dh_tj" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!--MAD·AMV-->
			<div class="MAD·AMV">
				<div class="header">
					<p>MAD·AMV</p>
					<div class="fl">	
						<p>查看更多</p>
						<svg class="index__icon__src-partition-recommend- jt" aria-hidden="true">
							<use xlink:href="#icon-gengduo"></use>
						</svg>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in amv" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!--MMD·3D-->
			<div class="MMD·3D">
				<div class="header">
					<p>MAD·AMV</p>
					<div class="fl">
						<p>查看更多</p>
						<svg class="index__icon__src-partition-recommend- jt" aria-hidden="true">
							<use xlink:href="#icon-gengduo"></use>
						</svg>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in d" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!--短片·手书·配音-->
			<div class="sv">
				<div class="header">
					<p>短片·手书·配音</p>
					<div class="fl">
						<p>查看更多</p>
						<svg class="index__icon__src-partition-recommend- jt" aria-hidden="true">
							<use xlink:href="#icon-gengduo"></use>
						</svg>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in vi" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!--综合-->
			<div class="zh">
				<div class="header">
					<p>综合</p>
					<div class="fl">
						<p>查看更多</p>
						<svg class="index__icon__src-partition-recommend- jt" aria-hidden="true">
							<use xlink:href="#icon-gengduo"></use>
						</svg>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in zong" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!--MAD选项页面-->
		<div class="content">
			<div class="hot">
				<div class="header">
					<p>热门推荐</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in aaa" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="hot">
				<div class="header">
					<p>最新视频</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in zx" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!--MMD选项页面-->
		<div class="content">
			<div class="hot">
				<div class="header">
					<p>热门推荐</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in mt" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="hot">
				<div class="header">
					<p>最新视频</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in mz" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!--短片选项页面-->
		<div class="content">
			<div class="hot">
				<div class="header">
					<p>热门推荐</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in dp" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="hot">
				<div class="header">
					<p>最新视频</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in pz" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!--综合选项页面-->
		<div class="content">
			<div class="hot">
				<div class="header">
					<p>热门推荐</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in zt" v-if="index<4" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="hot">
				<div class="header">
					<p>最新视频</p>
				</div>
				<div class="c_wrap">
					<div v-for="(item,index) in zn" class="fir">
						<img :src="item.pic" />
						<p>{{item.title}}</p>
						<div class="dw">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
								<use xlink:href="#icon-bofangshu"></use>
							</svg>
							<span>{{item.play}}</span>
							<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
								<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
								<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
							</svg>
							<span>{{item.video_review}}</span>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="footer">
			<p>哔哩哔哩 沪ICP备13002172号-3</p>
			<p>信息网络传播视听节目许可证：0910417</p>
		</div>
	</div>
</template>

<script>
	import CONFIG from "@/config"
	import axios from 'axios'

	export default {
		mounted() {
			var lis = document.querySelectorAll("ol li")
			//		console.log(lis)
			var div = document.querySelectorAll(".content")
			//		console.log(div)
			for(let i = 0; i < lis.length; i++) {
				lis[i].addEventListener("click", function() {
					for(var j = 0; j < div.length; j++) {
						div[j].classList.remove("dd")
						lis[j].classList.remove("active")
					}
					div[i].classList.add("dd")
					lis[i].classList.add("active")
				})
			}
			this.tj(),
				this.mad(),
				this.mmd(),
				this.sv(),
				this.zh(),
				this.a(),
				this.zui(),
				this.mtj(),
				this.mmz(),
				this.dpj(),
				this.dpz(),
				this.zht(),
				this.zhn()
		},
		data() {
			return {
				dh_tj: [],
				amv: [],
				d: [],
				vi: [],
				zong: [],
				aaa: [],
				zx: [],
				mt:[],
				mz:[],
				dp:[],
				pz:[],
				zt:[],
				zn:[]
			}
		},
		methods: {
			tj() {
				var url = CONFIG.domain + "/dh_tj";
				//			console.log(axios);
				axios.get(url).then((res) => {
					//				console.log(this);
					this.dh_tj = res.data.data;
				})
			},
			mad() {
				var url = CONFIG.domain + "/MAD";
				axios.get(url).then((res) => {
					this.amv = res.data.data;
				})
			},
			mmd() {
				var url = CONFIG.domain + "/MMD";
				axios.get(url).then((res) => {
					this.d = res.data.data;
				})
			},
			sv() {
				var url = CONFIG.domain + "/sv";
				axios.get(url).then((res) => {
					this.vi = res.data.data;
				})
			},
			zh() {
				var url = CONFIG.domain + "/zh";
				axios.get(url).then((res) => {
					this.zong = res.data.data;
				})
			},
			a() {
				var url = CONFIG.domain + "/AMV";
				axios.get(url).then((res) => {
					this.aaa = res.data.data;
				})
			},
			zui() {
				var url = CONFIG.domain + "/zx";
				axios.get(url).then((res) => {
					this.zx = res.data.data.archives;
				})
			},
			mtj() {
				var url = CONFIG.domain + "/mtj";
				axios.get(url).then((res) => {
					this.mt = res.data.data;
				})
			},
			mmz() {
				var url = CONFIG.domain + "/mmz";
				axios.get(url).then((res) => {
					this.mz = res.data.data.archives;
				})
			},
			dpj() {
				var url = CONFIG.domain + "/dpj";
				axios.get(url).then((res) => {
					this.dp = res.data.data;
				})
			},
			dpz() {
				var url = CONFIG.domain + "/dpz";
				axios.get(url).then((res) => {
					this.pz= res.data.data.archives;
				})
			},
			zht() {
				var url = CONFIG.domain + "/zht";
				axios.get(url).then((res) => {
					this.zt = res.data.data;
				})
			},
			zhn() {
				var url = CONFIG.domain + "/zhn";
				axios.get(url).then((res) => {
					this.zn= res.data.data.archives;
				})
			}
		}
	}
</script>

<style lang="scss">
	.web {
		background: #f4f4f4;
		.nav {
			height: 30px;
			overflow: hidden;
			background: #f9f9f9;
			ol {
				height: 40px;
				line-height: 30px;
				white-space: nowrap;
				overflow: hidden;
				overflow-x: scroll;
				li {
					display: inline-block;
					font-size: 12px;
					/*width: 18%;*/
					text-align: center;
					color: #757575;
					margin-left: 20px;
				}
				.active {
					color: #fb7299;
				}
			}
		}
		.content {
			width: 92%;
			margin: 0 auto;
			display: none;
			.header {
				padding-top: 15px;
				p {
					display: inline-block;
					font-size: 14px;
				}
				.fl {
					display: inline-block;
					float: right;
					.pp {
						width: 20px;
						height: 18px;
						fill: #ffa726;
						vertical-align: middle;
					}
					p {
						font-size: 12px;
						vertical-align: middle;
						display: inline-block;
						color: #999;
					}
					span {
						font-size: 12px;
						color: #ffa726;
						vertical-align: middle;
					}
					.jt {
						width: 18px;
						height: 12px;
						fill: #aaa;
						vertical-align: middle;
					}
				}
			}
			.c_wrap {
				margin-top: 10px;
				.fir {
					width: 48%;
					position: relative;
					display: inline-block;
					margin-bottom: 20px;
					img {
						width: 100%;
						height: 85px;
						border-radius: 10px;
					}
					p {
						font-size: 10px;
						/*display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;*/
						overflow: hidden;
						height: 32px;
					}
					.dw {
						position: absolute;
						bottom: 35px;
						left: 10px;
						svg {
							width: 12px;
							height: 20px;
							vertical-align: middle;
							fill: #fff;
						}
						span {
							font-size: 12px;
							vertical-align: middle;
							color: #fff;
						}
					}
				}
				.fir:nth-of-type(2n) {
					float: right;
				}
			}
		}
		.dd {
			display: block;
		}
		.footer {
			padding: 30px 0 8px;
			text-align: center;
			p {
				font-size: 12px;
				color: #999;
				line-height: 22px;
			}
		}
	}
</style>